import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Tabs from '@/components/Tabs'
import { useDispatch, useSelector } from 'react-redux'
import { getUserChannels, getAllChannels } from '@/store/actions/home'
import Icon from '@/components/Icon'
import { Drawer } from 'antd-mobile'
import Channels from './components/Channels'
export default function Home() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getUserChannels())
    dispatch(getAllChannels())
  }, [dispatch])
  const tabs = useSelector((state) => state.home.useChannels)
  const [open, setOpen] = useState(false)
  const onClose = () => {
    setOpen(false)
  }
  return (
    <div className={styles.root}>
      <Tabs tabs={tabs}></Tabs>

      {/* 频道 Tab 栏右侧的两个图标按钮：搜索、频道管理 */}
      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={() => setOpen(true)} />
      </div>

      <Drawer
        className="my-drawer"
        style={{ minHeight: document.documentElement.clientHeight }}
        children={''}
        sidebar={open && <Channels onClose={onClose}></Channels>}
        open={open}
      ></Drawer>
    </div>
  )
}
